<template>
    <tableLayout :columns="columns" :addDefData="addDefaultData" :formItem="formItem" :get="getData" :edit="editData" :editData="editGetData"
        :add="addData"
       @addOpen="addOpen"
        :row-selection="{ selectedRowKeys: selectedRowKeys, onSelect: onSelectItemChange, onChange: onSelectChange }"
        ref="layout">

        <!-- <template #button>
            <a-button type="primary" style="margin-left: 20px" @click="newModel">新建模型</a-button>
        </template> -->

        <template #operationMore="item">
            <a-divider type="vertical" />
            <a @click="openFlowDesigner(item.value.record)">设计</a>
            <a-divider type="vertical" />
            <a @click="deployBpmn(item.value.record)">部署</a>
        </template>

    </tableLayout>

    <Modal ref="flowDesignerModal" :editItem="data.editItem" style="top:0;bottom:0;" @cancel="cancelCalback"></Modal>

</template>

<script lang="ts">
import tableLayout from '@/components/tableLayout/tableLayout.vue'
import { title } from 'process';
import { defineComponent, ref, reactive } from 'vue'
import { getData, addData, newModel, editData, editGetData,deployBpmnXml } from '@/api/flowModel'
import Modal from './flowDesigner.vue';
import { notification,message } from 'ant-design-vue';
import { useRoute } from 'vue-router'
import { backTopProps } from 'ant-design-vue/lib/back-top';
import { chownSync } from 'fs';
import { v4 as uuidv4 } from 'uuid';

export default defineComponent({
    name: 'workflow_model_table',
    components: {
        tableLayout,
        Modal,
    },
    setup() {
        const flowDesignerModal = ref();
        const layout = ref();
        const route = useRoute();
        const addDefaultData = ref({});
       const addOpen = () => {
        addDefaultData.value.Key=uuidv4();
        }
        const data = reactive({
            editItem: {}
        })

        //let editItem = ref();
        //列表
        const columns = [
            { title: '序号', dataIndex: 'Id' },
            { title: '名称', dataIndex: 'Name' },
            { title: 'Key', dataIndex: 'Key' },
            { title: '分类', dataIndex: 'Category' },
            { title: '创建时间', dataIndex: 'CreateTime' },
            { title: '修改时间', dataIndex: 'LastUpdateTime' },
            { title: '版本', dataIndex: 'Version' },
            { title: '部署ID', dataIndex: 'DeploymentId' }
        ]

        //多选
        const selectedRowKeys = ref<any[]>([])
        const onSelectChange = (keys: []) => {
            selectedRowKeys.value = keys;
        }

        const cancelCalback=()=>{
            layout.value.getData();
        }

        const onSelectItemChange = (record: {}, selected: any) => {
            data.editItem = selected;
        }

        const openNotificationWithIcon = (type: String,title:String,msg:string) => {
            notification[type]({
                message:title,
                description:msg,
            });
        };

        const deployBpmn = (val: any) => {
            if(!val.MetaInfo){
                openNotificationWithIcon('warning','提示','请先设计流程BPMN!');
                return;
            }

            deployBpmnXml(
            { 
                bpmnXML: val.MetaInfo,
                name:val.Name,
                category:val.Category,
                businessKey:uuidv4(),
                key:val.Key,
                tenantId:val.TenantId                    
            }).then(e => {
                message.success("部署成功！")
            }).catch(err => {
                message.error(err.message || "部署失败!")
            })
        }

        const openFlowDesigner = (val: any) => {
            data.editItem = {};
            data.editItem = val;
            console.log(data.editItem);
            flowDesignerModal.value.open();
        }
        // 表单
        const formItem = [
            { title: '名称', key: 'Name', type: 'input' },
            { title: '类别', key: 'Category', type: 'input' },
            { title: 'Key', key: 'Key', type: 'input' },
            { key: 'Version', type: 'hidden' }
        ]



        return { addOpen,addDefaultData,deployBpmn, onSelectItemChange, cancelCalback,data,layout, route, flowDesignerModal, openFlowDesigner, columns, selectedRowKeys, formItem, newModel, addData, onSelectChange, getData, editData, editGetData };
    }
})

</script>
